<script lang="ts" setup>

const props = defineProps({
  banners: Array<string>
});
</script>

<template>
  <view class="top-banner-box">
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in props.banners" :key="index">
        <image class="banner" :src="item.img_url" />
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss" scoped>
.top-banner-box {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;;
  border-radius: 5px;

  .swiper {
    width: 100%;
    height: 260rpx;
    padding: 10px;

    .banner {
      width: 100%;
      height: 260rpx;
    }
  }
}
</style>
